<template>
  <div v-show="editShow">
    <div class="container">
      <el-row :gutter="20">
        <div class="clearfix">
          <div class="crumbs">
            <i class="el-icon-back"></i>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="btn-save">
            <el-button type="primary" @click="saveClick('ruleForm')">保存</el-button>
          </div>
        </div>
        <div class="form-box">
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="120px"
            class="eidt-el-form el-form-wrap"
          >
            <el-form-item label="票类型">
              <el-select v-model="ruleForm.ticketTypeId" placeholder="选择票类型">
                <el-option
                  v-for="(type,index) in TicketType"
                  :label="type.name"
                  :value="type.ticketTypeId"
                >
                  <div @click="getChangeType(type)">{{type.name}}</div>
                </el-option>
              </el-select>
            </el-form-item>
            <div class="line-box">
              <el-form-item label="标题" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="禁用/启用：">
                <el-radio-group v-model="ruleForm.disabled" @change="getChageRadio">
                  <el-radio :label="0">禁用</el-radio>
                  <el-radio :label="1">启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="line-box">
              <el-form-item label="英文标题" prop="englishName">
                <el-input v-model="ruleForm.englishName"></el-input>
              </el-form-item>
              <el-form-item label="微信登记：">
                <el-radio-group v-model="ruleForm.wechat" @change="getWechatRadio">
                  <el-radio :label="0">启用微信注册</el-radio>
                  <el-radio :label="1">禁用微信注册</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="line-box">
              <el-form-item label="通知邮件" prop="email">
                <el-input v-model="ruleForm.email" type="textarea" rows="2"></el-input>
              </el-form-item>
              <el-form-item label="是否审核：">
                <el-radio-group v-model="ruleForm.verify" @change="getEmailRadio">
                  <el-radio :label="0">启用注册审核</el-radio>
                  <el-radio :label="1">禁用注册审核</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="line-box">
              <el-form-item label="短信通知内容" prop="sms">
                <el-input v-model="ruleForm.sms" type="textarea" rows="2"></el-input>
              </el-form-item>
              <el-form-item label="英文注册：">
                <el-radio-group v-model="ruleForm.english" @change="getEnglishRadio">
                  <el-radio :label="0">启用英文注册</el-radio>
                  <el-radio :label="1">禁用英文注册</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="line-box">
              <div class="up-img">
                <UploadImg @uploadImg="getUploadImg" :editImg="editImg" :imgTitle="imgTitle"></UploadImg>
              </div>
              <el-form-item label="注册url地址" prop="url">
                <el-input v-model="ruleForm.url"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <el-divider content-position="left">注册属性</el-divider>
          <el-table :data="tableData" style="width: 100%;margin-bottom:30px;z-index:1">
            <el-table-column width="100"></el-table-column>
            <el-table-column prop="date">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  clearable
                  style="max-width:275px"
                  class="el-input-position"
                  placeholder="名称"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.phone"
                  clearable
                  style="max-width:275px"
                  class="el-input-position"
                  placeholder="属性名称"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date">
              <template slot-scope="scope">
                <el-select
                  placeholder="文本框"
                  clearable
                  style="max-width:275px"
                  v-model="scope.row.relation"
                  class="el-input-position"
                >
                  <el-option label="文本框" value="文本框"></el-option>
                  <el-option label="选择框" value="选择框"></el-option>
                  <el-option label="地区选择" value="地区选择"></el-option>
                  <el-option label="手机验证" value="手机验证"></el-option>
                  <el-option label="邮箱验证" value="邮箱验证"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
              <el-radio-group v-model="scope.row.enabled">
                <el-radio :label="0">必填</el-radio>
                <el-radio :label="1">非必填</el-radio>
              </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column width="150">
              <template slot-scope="scope">
                <div v-if="scope.$index==0">
                  <el-button type="primary" plain @click="addRow">增加</el-button>
                  <!-- <el-button type="primary" plain @click="delRow(scope.$index)">清空</el-button> -->
                </div>
                <div v-if="scope.$index!=0">
                  <el-button type="danger" plain @click="deleterow(scope.$index,scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="10"></el-table-column>
          </el-table>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import UploadImg from "../../public/UploadImg";
import bus from "../../common/bus";

export default {
  name: "editprojectmanage",
  data() {
    return {
      ruleForm: {
        ticketTypeId: "",
        name: "",
        englishName: "",
        sms: "",
        email: "",
        url: "",
        banner: "",
        disabled: 0,
        english: 0,
        wechat: 0,
        verify: 0,
        typeName: "",
        projectId: "",
        type: 3
      },
      editImg: "",
      ticketCom_Id: "",
      dataList: [],
      ticketTypeId: "",
      TicketType: [],
      imgTitle: "Banner",
      tableData: [
        {
          name: "",
          Student_Parent_Id: 0,
          phone: "",
          relation: ""
        }
      ]
    };
  },
  props: {
    editShow: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object
    }
  },
  created() {
    var project_Id = localStorage.getItem("project_Id");
    this.projectId = project_Id;

    this.getTicketType();
  },
  watch: {
    editData: function() {
      const item = this.editData;
      this.ruleForm = {
        name: item.name,
        englishName: item.englishName,
        sms: item.sms,
        email: item.email,
        url: item.url,
        english: item.english,
        wechat: item.wechat,
        verify: item.verify,
        disabled: item.disabled,
        ticketTypeId: item.ticketTypeId,
        typeName: item.typeName
      };
      this.ticketCom_Id = item.ticketRecordId;
      this.editImg = item.banner;
    }
  },
  methods: {
    saveClick(ruleForm) {
      this.ruleForm = {
        name: this.ruleForm.name,
        englishName: this.ruleForm.englishName,
        sms: this.ruleForm.sms,
        email: this.ruleForm.email,
        url: this.ruleForm.url,
        banner: this.ruleForm.banner,
        english: this.ruleForm.english,
        wechat: this.ruleForm.wechat,
        verify: this.ruleForm.verify,
        disabled: this.ruleForm.disabled,
        projectId: this.projectId,
        typeName: this.ruleForm.typeName,
        ticketTypeId: this.ruleForm.ticketTypeId,
        type: 3
      };
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.ticketCom_Id == "" || this.ticketCom_Id == undefined) {
            this.$axios.post("/Register/", this.ruleForm).then(res => {
              if (res.data.hasError == false) {
                this.$message.success("保存成功！");
                this.goBack();
                this.$refs[ruleForm].resetFields();
              } else {
                this.$message.error("保存失败！");
              }
            });
          } else {
            this.$axios
              .put("/Register/" + this.ticketCom_Id + "", this.ruleForm)
              .then(res => {
                if (res.data.hasError == false) {
                  this.$message.success("编辑成功！");
                  this.goBack();
                  this.$refs[ruleForm].resetFields();
                } else {
                  this.$message.error("编辑失败！");
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$emit("backFunStu");
      this.ticketCom_Id = "";
    },
    getTicketType() {
      this.$axios.get("/TicketType/").then(res => {
        if (res.data.hasError == false) {
          this.TicketType = [...res.data.data];
        }
      });
    },
    getChangeType(type) {
      this.ruleForm.ticketTypeId = type.ticketTypeId;
      this.ruleForm.typeName = type.name;
    },
    getUploadImg(imgSrc) {
      this.formData.banner = imgSrc;
    },
    getChageRadio(value) {
      this.ruleForm.disabled = value;
    },
    getWechatRadio(value) {
      this.ruleForm.wechat = value;
    },
    getEmailRadio(value) {
      this.ruleForm.email = value;
    },
    getEnglishRadio(value) {
      this.ruleForm.english = value;
    },
    addRow() {
      var list = {
        name: "",
        phone: "",
        enabled:"",
        relation: ""
      };
      this.tableData.push(list);
    },
    deleterow(index, row) {
      this.tableData.splice(index, 1);
    }
  },
  components: {
    UploadImg
  }
};
</script>

<style lang="scss" scoped>
.el-form-wrap {
  width: 100% !important;
}
.line-box {
  display: flex;
  flex: 1;
}
.line-box .el-form-item,
.line-box .up-img {
  width: 40% !important;
}
</style>